<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title>测试</title>
  <meta name="Keywords" content="" />
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
  <meta name="format-detection" content="telephone=no, email=no" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="renderer" content="webkit" />
  <meta name="force-rendering" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="msapplication-tap-highlight" content="no" />
  <meta name="full-screen" content="yes" />
  <meta name="x5-fullscreen" content="true" />
  <meta name="360-fullscreen" content="true" />
  <meta name="screen-orientation" content="" />
  <meta name="x5-orientation" content="" />
  <meta name="x5-page-mode" content="app" />
  <link rel="stylesheet" href="../css/reset.css">
  <style>
    @font-face {
      font-family: "Oswald";
      src: url("../../assets/06/font/Oswald-Regular.ttf");
    }

    #container {
      position: fixed;
      left: 0;
      z-index: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }

    .app {
      width: 100%;
      height: 100vh;
      overflow: hidden;
      position: relative;
      
    }

    .ui {
      width: 100%;
      height: 100%;
      position: relative;
      z-index: 1000;
    }

    .hide{
      display: none;
    }

    .talk-label{
        color: #FFF;
				font-family: "Oswald";
        font-size: 12px;
				padding: 2px;
				background: rgba( 0, 0, 0, .6 );
        margin-top: -1em;
        animation: item-label-show .5s;
    }
    .bag-btn{
      width: 56px;
      height: 55px;
      background: url("../assets/06/imgs/bag.png") no-repeat;
      background-size: 100% auto;
      position: absolute;
      right: 10px;
      top: 10px;
      cursor: pointer;
      opacity: .6;
      transition: .2s all;
    }
    .bag-btn.bounce{
      animation: bounce 1s;
    }
    .bag-btn:hover{
      opacity: 1;
    }
    .box{
      width: 377px;
      height: 454px;
      background: url("../assets/06/imgs/box.png") no-repeat;
      background-size: 100% auto;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -227px;
      margin-left: -188.5px;
      z-index: 1000;
      box-sizing: border-box;
      padding-top: 65px;
      animation: .5s bounceIn;
    }
    .mask{
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,.5);
      z-index: 999;
    }
    .list{
      width: 80%;
      box-sizing: border-box;
      padding:10px;
      height: 336px;
      overflow: auto;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: flex-start;
      align-content: start;
    }
    .list>li{
      position: relative;
      margin-bottom: 10px;
      cursor: pointer;
      width: 80px;
    }
    .list>li>p{
      font-size: 100%;
      font-size: 12px;
      text-align: center;
      color: rgb(255, 255, 250);
      height: 30px;
      line-height: 30px;
    }
    .list>li .pic{
      width: 100%;
      height: 80px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 10px #f5f243;
    }
    .list>li:not(:nth-of-type(3n)){
      margin-right: 20px;
    }
    .list>li .pic::after{
      content: '';
      background: url("../assets/06/imgs/border.png") no-repeat;
      background-size: 100% auto;
      width: 100%;
      height: 100%;
      position: absolute;
    }
    .list>li .pic>img{
      width: 60%;
      height: 60%;
      object-fit: cover;
      background-color: #fff;
    }
    @keyframes item-label-show{
      0%{
        opacity: 0;
        top: 20px;
      }
      100%{
        opacity: 1;
        top:0;
      }
    }
    @keyframes bounce {
    0%,20%,53%,80%,to {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
        animation-timing-function: cubic-bezier(.215,.61,.355,1);
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    40%,43% {
        -webkit-transform: translate3d(0,-30px,0);
        transform: translate3d(0,-30px,0)
    }

    40%,43%,70% {
        -webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06);
        animation-timing-function: cubic-bezier(.755,.05,.855,.06)
    }

    70% {
        -webkit-transform: translate3d(0,-15px,0);
        transform: translate3d(0,-15px,0)
    }

    90% {
        -webkit-transform: translate3d(0,-4px,0);
        transform: translate3d(0,-4px,0)
    }
}

@keyframes bounceIn {
    0%,20%,40%,60%,80%,to {
        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3)
    }

    20% {
        -webkit-transform: scale3d(1.1,1.1,1.1);
        transform: scale3d(1.1,1.1,1.1)
    }

    40% {
        -webkit-transform: scale3d(.9,.9,.9);
        transform: scale3d(.9,.9,.9)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03,1.03,1.03);
        transform: scale3d(1.03,1.03,1.03)
    }

    80% {
        -webkit-transform: scale3d(.97,.97,.97);
        transform: scale3d(.97,.97,.97)
    }

    to {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

  </style>
</head>

<body>

  <div class="app">
    <div id='container'></div>
    <div class="ui" id="ui">
      <div class="bag-btn" v-show="!isOpen" @click.prevent="openBag"></div>
      <div class="mask" @click.stop="closeBag" v-show="isOpen"></div>
      <div class="box" v-show="isOpen">
        <ul class="list">
          <li v-for="item in list" :title="item.desc" @click.prevent.stop="toLink(item)">
            <div class="pic">
              <img :src="item.pic" alt="" srcset="">
            </div>
            <p>{{item.name}}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <script src="../js/three.min.js"></script>
  <script src="../js/GLTFLoader.js"></script>
  <script src="../js/OrbitControls.js"></script>
  <script src="../js/utils/gsap.min.js"></script>
  <script src="../js/renderers/CSS2DRenderer.js"></script>
  <script src="../js/utils/petite-vue.iife.js"></script>
  <script src="../js/main/06/app.js"></script>
</body>
</head>

</html>